<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_createTempLayer"></title>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <style>
      #toolbar {
        position: absolute;
        top: 50px;
        right: 10px;
        width: 300px;
        text-align: center;
        z-index: 500;
        border-radius: 4px;
      }
    </style>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="toolbar" class="panel panel-primary">
      <div class="panel-heading">
        <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer"></h5>
      </div>
      <div class="panel-body content">
        <div style="margin-bottom: 5px; text-align: left;">
          <span data-i18n="resources.text_gammaParamBounds"></span>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon" data-i18n="resources.text_gamma"></span>
            <input id="gammaParam" value="1" class="form-control" />
          </div>
        </div>
        <input
          type="button"
          class="btn btn-default"
          data-i18n="[value]resources.text_create"
          onclick="updateTempLayer()"
        />
      </div>
    </div>
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var layerInfoService,
        tempLayer,
        newResourceID,
        result,
        url = host + '/iserver/services/map-world/rest/maps/World';
      var map = new maplibregl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {},
          layers: []
        },
        center: [0, 0],
        zoom: 2
      });
      map.on('load', function () {
        createTempLayer();
      });

      function createTempLayer() {
        new maplibregl.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
          result = serviceResult.result;
          layer = result.subLayers.layers[15]
              layer.gamma = document.getElementById('gammaParam').value || 1;
              result.subLayers.layers = [layer];
              layerInfoService = new maplibregl.supermap.LayerInfoService(url)
              layerInfoService.setLayersInfo(
                  new maplibregl.supermap.SetLayersInfoParameters({
                    layersInfo: result
                  })
                )
                .then((res) => {
                  var result = res.result;
                  newResourceID = result.newResourceID;
                  if (result && result.newResourceID) {
                    map.addLayer({
                      id: 'layer',
                      type: 'raster',
                      source: {
                        type: 'raster',
                        tiles: [
                          host + '/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&noWrap=true&layersID=' +
                            result.newResourceID
                        ],
                        tileSize: 256
                      }
                    });
                  }
                });
        });
      }

      function updateTempLayer() {
        if (!newResourceID) {
          return;
        }
        var layer = result.subLayers.layers[0];
        layer.gamma = document.getElementById("gammaParam").value || 1;
        layerInfoService.setLayersInfo(
          new maplibregl.supermap.SetLayersInfoParameters({
              layersInfo: result,
              resourceID: newResourceID,
              isTempLayers: true
            })
          ).then((res) => {
            map.style.sourceCaches['layer'].clearTiles();
            map.style.sourceCaches['layer'].update(map.transform);
            map.triggerRepaint();
          });
      }
    </script>
  </body>
</html>
